document.addEventListener('DOMContentLoaded', function() {
       const apiUrl = 'http://localhost:3000/students';
    
       // 获取学生数据并展示
       function getStudents() {
           const xhr = new XMLHttpRequest();
           xhr.open('GET', apiUrl, true);
           xhr.onload　 = function() {
               if (xhr.status === 200) {
                   const students = JSON.parse(xhr.responseText);
                   const studentList = document.getElementById('studentList');
                   studentList.innerHTML = ''; // 清空列表
                   students.forEach(student => {
                       const li = document.createElement('li');
                       li.textContent = `ID: ${student.id}, 姓名: ${student.name}, 年龄: ${student.age}, 班级: ${student.class}`;
                       studentList.appendChild(li);
                   });
               }
           };
           xhr.send();
       }
    
       // 新增学生
       const addForm = document.getElementById('addForm');
       addForm.addEventListener('submit', function(event) {
           event.preventDefault();
           const name = document.getElementById('name').value;
           const age = document.getElementById('age').value;
           const className = document.getElementById('class').value;
    
           const newStudent = {
               name: name,
               age: age,
               class: className
           };
    
           const xhr = new XMLHttpRequest();
           xhr.open('POST', apiUrl, true);
           xhr.setRequestHeader('Content-Type', 'application/json');
           xhr.onload　 = function() {
               if (xhr.status === 201) {
                   getStudents(); // 更新学生列表
               }
           };
           xhr.send(JSON.stringify(newStudent));
       });
    
       // 修改学生
       const editForm = document.getElementById('editForm');
       editForm.addEventListener('submit', function(event) {
           event.preventDefault();
           const id = document.getElementById('editId').value;
           const name = document.getElementById('editName').value;
           const age = document.getElementById('editAge').value;
           const className = document.getElementById('editClass').value;
    
           const updatedStudent = {};
           if (name) updatedStudent.name = name;
           if (age) updatedStudent.age = age;
           if (className) updatedStudent.class = className;
    
           const xhr = new XMLHttpRequest();
           xhr.open('PUT', `${apiUrl}/${id}`, true);
           xhr.setRequestHeader('Content-Type', 'application/json');
           xhr.onload　 = function() {
               if (xhr.status === 200) {
                   getStudents(); // 更新学生列表
               }
           };
           xhr.send(JSON.stringify(updatedStudent));
       });
    
       // 删除学生
       const deleteForm = document.getElementById('deleteForm');
       deleteForm.addEventListener('submit', function(event) {
           event.preventDefault();
           const id = document.getElementById('deleteId').value;
    
           const xhr = new XMLHttpRequest();
           xhr.open('DELETE', `${apiUrl}/${id}`, true);
           xhr.onload　 = function() {
               if (xhr.status === 200) {
                   getStudents(); // 更新学生列表
               }
           };
           xhr.send();
       });
    
       // 初始加载学生数据
       getStudents();
   });